<template>
  <div class="datav">
    <div class="datav_bj">
      <datavBJ></datavBJ>
    </div>
    <div class="datav_top_box">
      <datavtop></datavtop>
    </div>
    <div class="datav_body_box">
      <div class="datav_body_left">
        <div>
          <datavmoney :revenue="dataInfo.revenue"></datavmoney>
        </div>
        <div>
          <datavoutstanding :dataInfo="dataInfo"></datavoutstanding>
        </div>
        <div>
          <datavuser :dataInfo="dataInfo"></datavuser>
        </div>
      </div>
      <div class="datav_body_middle">
        <div>
          <datavmap :user_lists="user_lists" :user_rating_lists="user_rating_lists"></datavmap>
        </div>
        <div v-if="user_day && user_day.length > 0">
          <datavnew :datalist="user_day"></datavnew>
        </div>
      </div>
      <div class="datav_body_right">
        <div v-if="capital && JSON.stringify(capital) != '{}'">
          <datavcount1 :capital="capital"></datavcount1>
        </div>
        <div v-if="commission && JSON.stringify(commission) != '{}'">
          <datavcount2 :commission="commission"></datavcount2>
        </div>
        <div v-if="order && order.length > 0">
          <datavcount3 :order="order"></datavcount3>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import datavtop from "@/components/datav/datav_top";
import datavmoney from "@/components/datav/datav_money";
import datavoutstanding from "@/components/datav/datav_outstanding";
import datavuser from "@/components/datav/datav_user";
import datavmap from "@/components/datav/datav_map";
import datavnew from "@/components/datav/datav_new";
import datavcount1 from "@/components/datav/datav_count1";
import datavcount2 from "@/components/datav/datav_count2";
import datavcount3 from "@/components/datav/datav_count3";
import datavBJ from "@/components/datav/datav_bj";

export default {
  name: "dataV",
  data () {
    return {
      user_day: [],
      dataInfo: {},
      capital: {},
      commission: {},
      order: [],
      user_lists: [],
      user_rating_lists: [],
      timer: "" //定时器
    };
  },
  components: {
    datavtop,
    datavmoney,
    datavoutstanding,
    datavuser,
    datavmap,
    datavnew,
    datavcount1,
    datavcount2,
    datavcount3,
    datavBJ
  },
  mounted () {
    // var that = this;
    // this.$nextTick(() => {
    //     that.setRem();
    //     window.addEventListener("load", that.setRem());
    //     window.addEventListener("resize", that.setRem());
    // });
  },
  methods: {
    setRem () {
      var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
      var bodyWidth = document.body.clientWidth; // 当前窗口的宽度
      var rem = bodyWidth * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
      document.getElementsByTagName("html")[0].style.fontSize = rem + "px";
      console.log(document.getElementsByTagName("html")[0].style.fontSize);
    },
    getDataV () {
      //获取 大屏数据
      this.$api.getMember.getDataV().then(res => {
        if (res.data.code == 200) {
          this.dataInfo = res.data.result;
          this.user_day = res.data.result.user_day;
          this.capital = res.data.result.zjzb;
          this.commission = res.data.result.yjzb;
          this.order = res.data.result.order_year;
          this.user_lists = res.data.result.user_lists;
          this.user_rating_lists = res.data.result.user_rating_lists;
          // console.log("kkkkkkkkkkkkkkkk:",this.product)
        }
      });
    }
  },
  created () {
    this.getDataV();
  }
  // mounted() {
  //   this.timer = setInterval(this.getDataV, 5000);
  // },
  // beforeDestroy() {
  //   clearInterval(this.timer);
  // }
};
</script>
<style lang="less" scoped>
#app {
  width: 100vw !important;
}

.datav {
  width: 100%;
  height: 100%;
  background: url("./../../assets/img/index/datav-bj1.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;

  .datav_top_box {
    width: 100%;
    height: 9%;
    z-index: 99;
  }

  .datav_bj {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 99%;
    z-index: 1;
    opacity: 0.8;
  }

  .datav_body_box {
    padding: 1% 1.5%;
    height: 91%;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 99;
    overflow: auto;
  }

  .datav_body_middle {
    width: 43%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    justify-content: space-between;
  }

  .datav_body_left,
  .datav_body_right {
    width: 27%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    justify-content: space-between;
  }

  .datav_body_left > div,
  .datav_body_middle > div,
  .datav_body_right > div {
    width: 100%;
  }
}
</style>
